<template>
    <div class="white-box">
        <div class="task-one" style="margin-top: 0">
            <el-input placeholder="请输入搜索内容..." v-model="search_text" @keyup.enter.native="handleSearch" clearable></el-input>
            <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
        </div>
        <div class="right-list">
            <loading-small :loading="loading" v-if="loading"></loading-small>
            <el-empty description="暂无文章数据" v-if="arr_data.length === 0 && !loading" />
            <div class="notice-box" v-if="arr_data.length > 0 && !loading">
                <div class="notice-item" v-for="(item, index) in arr_data" :key="index" @click="toDetail(item)">
                    <div class="notice-item__title line-two">{{ item.title }}</div>
                    <div class="notice-item__desc flexs">
                        <span>{{ item.create_time }}</span>
                    </div>
                </div>
            </div>
        </div>
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
    </div>
</template>

<script setup>
import { onMounted, watch } from "vue"
import { useRouter, onBeforeRouteLeave } from "vue-router"
import { userStore } from "@store/user"
import LoadingSmall from "@components/LoadingSmall.vue"
import OneLoad from "@mixins/one-load"
import { Search } from "@element-plus/icons-vue"

const router = useRouter()
const store = userStore()

onMounted(() => {
    // getList()
})

// 离开-可以利用这个触发删除页面缓存操作
onBeforeRouteLeave((to, from, next) => {
    if (to.name === "NoticeDetail") {
        store.setInclude("NoticeList")
    } else {
        store.delInclude("NoticeList")
    }
    next()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, arr_data, loading, totalNums, search_text, search_btn, pubParams, pubRefreshParams, getdata } = OneLoad()
// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pageSize.value = val
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    page.value = val
    pubParams(getList)
})

function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        title: search_text.value,
    }
    getdata("message/index", params)
}

const handleSearch = () => {
    search_btn.value = true
    pubRefreshParams(getList)
}

const toDetail = (item) => {
    store.setCur(0)
    store.setStyle(true)
    sessionStorage.setItem("notice", JSON.stringify(item))
    router.push("/Notice/NoticeDetail")
}
</script>

<script>
export default {
    name: "NoticeList",
}
</script>

<style lang="less" scoped>
.notice-box {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 162px;
    .notice-item {
        border-bottom: 1px solid #f6f6f6;
        padding: 10px 0px 10px 14px;
        overflow: hidden;
        cursor: pointer;
        &:hover {
            background: #f8f8f8;
        }
        .notice-item__title {
            font-size: 16px;
            color: #333;
            line-height: 30px;
            &:hover {
                color: #000;
            }
        }
        .notice-item__desc {
            color: #999;
            font-size: 12px;
            line-height: 30px;
        }
    }
}
</style>
